import { useState, useCallback, useRef} from "react"
// 函数式组件
export const ChildComponent  = () => {

const [count, setCount] = useState(1)
const [ListData, setListData] = useState(['111'])
const [nav, setNav] = useState([''])

// const cachedFn = useCallback(fn, dependencies) 
const inputRef = useRef(null)
let changeCount = useRef(0)
const setText = useCallback((e) =>{
    console.log(e.target.value)
    setNav(e.target.value)
}, []) // 空数组的含义 里面的代码还是以前的


const setList = useCallback(() => {
    setListData([nav,...ListData])
    setCount(count + 1)
    setNav('')
    changeCount.current++
}, [nav, ListData])


  return (
    <div>
        <input onChange={setText} value={nav} ref={inputRef}></input>
        <button onClick={setList}>add</button>
        <div>
            <ul>
                {
                    ListData.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
            <span>
                总计：{ count } || { changeCount.current}
            </span>
            <span>
                
            </span>
        </div>
    </div>
  )
}
